<div class="mdl-cell mdl-cell--9-col-desktop mdl-cell--9-col-tablet mdl-cell--4-col-phone mdl-cell--top">
  <div class="mdl-cell mdl-cell--12-col-desktop mdl-cell--12-col-tablet mdl-cell--4-col-phone">
    <base-card>
      <base-card-title>
        <h2 class="mdl-card__title-text">General</h2>
      </base-card-title>
      <base-card-body>
        <span class="text-color--gray">Roboto is the standart typefaces of Material Design style</span>
        <p>Roboto weight 200 30px</p>
        <p>Roboto weight 300 30px</p>
        <p>Roboto weight 400 30px</p>
        <p>Roboto weight 500 30px</p>
        <p>Roboto weight 600 30px</p>
      </base-card-body>
    </base-card>
  </div>
  <div class="mdl-cell mdl-cell--12-col-desktop mdl-cell--12-col-tablet mdl-cell--4-col-phone">
    <base-card>
      <base-card-title>
        <h2 class="mdl-card__title-text">Text samples</h2>
      </base-card-title>
      <base-card-body>
      <span class="text-color--gray">SAMPLE TEXT</span>
      <p>
        Has consul possim sadipscing no. Facer dissentias cu est, vim eu habeo eruditi.
        Rationibus reprimique vis an, mei vidit solum sententiae no, rebum blandit eleifend cum id. Id amet mucius aperiri mea.
        Eu eam audiam utroque gloriatur, cu duis graeci disputationi mea, has an harum nihil blandit.
        <br><br>
        Facer cetero est ne, no duo commodo tincidunt scribentur, in quo maiorum iudicabit.
        Everti liberavisse cu ius. Eam ea antiopam referrentur, probo affert docendi no usu, est no odio perpetua electram.
        Clita viderer eum ea.
        Partem democritum qui in. In nec sale choro inermis, et vel audiam philosophia.
      </p>
      <span class="text-color--gray">SAMPLE TEXT WITH LEAD BODY</span>

      <h5>Lead body. Has consul possim sadipscing no</h5>
      <p>
        Has consul possim sadipscing no. Facer dissentias cu est, vim eu habeo eruditi.
        Rationibus reprimique vis an, mei vidit solum sententiae no, rebum blandit eleifend cum id. Id amet mucius aperiri mea.
        Eu eam audiam utroque gloriatur, cu duis graeci disputationi mea, has an harum nihil blandit.
        <br><br>
        Facer cetero est ne, no duo commodo tincidunt scribentur, in quo maiorum iudicabit.
        Everti liberavisse cu ius. Eam ea antiopam referrentur, probo affert docendi no usu, est no odio perpetua electram.
        Clita viderer eum ea.
        Partem democritum qui in. In nec sale choro inermis, et vel audiam philosophia.
      </p>
      <span class="text-color--gray">COLORED TEXT SAMPLES</span>
      <p>
        <span class="color-text--red">Has consul possim sadipscing no. Facer dissentias cu est, vim eu habeo eruditi.</span>
        <br>
        <span class="color-text--orange">Has consul possim sadipscing no. Facer dissentias cu est, vim eu habeo eruditi.</span>
        <br>
        <span class="color-text--teal">Has consul possim sadipscing no. Facer dissentias cu est, vim eu habeo eruditi.</span>
        <br>
        <span class="color-text--light-blue">Has consul possim sadipscing no. Facer dissentias cu est, vim eu habeo eruditi.</span>
        <br>
        <span class="color-text--purple">Has consul possim sadipscing no. Facer dissentias cu est, vim eu habeo eruditi.</span>
        <br>
        <span class="color-text--green">Has consul possim sadipscing no. Facer dissentias cu est, vim eu habeo eruditi.</span>
      </p>
      </base-card-body>
    </base-card>
  </div>
  <div class="mdl-cell mdl-cell--12-col-desktop mdl-cell--12-col-tablet mdl-cell--4-col-phone">
    <base-card>
      <base-card-title>
        <h2 class="mdl-card__title-text">Headers</h2>
      </base-card-title>
      <base-card-body>
        <h1>Heading h1</h1>
        <h2>Heading h2</h2>
        <h3>Heading h3</h3>
        <h4>Heading h4</h4>
        <h5>Heading h5</h5>
        <h6>Heading h6</h6>
      </base-card-body>
    </base-card>
  </div>
  <div class="mdl-cell mdl-cell--12-col-desktop mdl-cell--12-col-tablet mdl-cell--4-col-phone">
    <base-card>
      <base-card-title>
        <h2 class="mdl-card__title-text">Alignment</h2>
      </base-card-title>
      <base-card-body>
        <div>Left aligned text</div>
        <div>Center aligned text</div>
        <div>Right aligned text</div>
      </base-card-body>
    </base-card>
  </div>
</div>
<div class="mdl-cell mdl-cell--3-col-desktop mdl-cell--3-col-tablet mdl-cell--4-col-phone mdl-cell--top">
  <div class="mdl-cell mdl-cell--12-col-desktop mdl-cell--12-col-tablet mdl-cell--4-col-phone">
    <base-card>
      <base-card-title>
        <h2 class="mdl-card__title-text">Unordered list</h2>
      </base-card-title>
      <base-card-body>
        <ul>
          <li>Code</li>
          <li>
            Eating
            <ul>
              <li>Breakfast</li>
              <li>Lunch</li>
              <li>Dinner</li>
            </ul>
          </li>
          <li>Sleeping</li>
          <li>Meditation</li>
          <li>The fight against evil</li>
        </ul>
      </base-card-body>
    </base-card>
  </div>
  <div class="mdl-cell mdl-cell--12-col-desktop mdl-cell--12-col-tablet mdl-cell--4-col-phone">
    <base-card>
      <base-card-title>
        <h2 class="mdl-card__title-text">Ordered list</h2>
      </base-card-title>
      <base-card-body>
        <ol>
          <li>Code</li>
          <li>
            Eating
            <ul>
              <li>Breakfast</li>
              <li>Lunch</li>
              <li>Dinner</li>
            </ul>
          </li>
          <li>Sleeping</li>
          <li>Meditation</li>
          <li>The fight against evil</li>
        </ol>
      </base-card-body>
    </base-card>
  </div>
  <div class="mdl-cell mdl-cell--12-col-desktop mdl-cell--12-col-tablet mdl-cell--4-col-phone">
    <base-card>
      <base-card-title>
        <h2 class="mdl-card__title-text">Unstyled list</h2>
      </base-card-title>
      <base-card-body>
        <ul>
          <li>Code</li>
          <li>
            Eating
            <ul>
              <li>Breakfast</li>
              <li>Lunch</li>
              <li>Dinner</li>
            </ul>
          </li>
          <li>Sleeping</li>
          <li>Meditation</li>
          <li>The fight against evil</li>
        </ul>
      </base-card-body>
    </base-card>
  </div>
  <div class="mdl-cell mdl-cell--12-col-desktop mdl-cell--12-col-tablet mdl-cell--4-col-phone">
    <base-card>
      <base-card-title>
        <h2 class="mdl-card__title-text">Inline list</h2>
      </base-card-title>
      <base-card-body>
        <ol>
          <li>Code</li>
          <li>Eating</li>
          <li>Sleeping</li>
        </ol>
      </base-card-body>
    </base-card>
  </div>
  <div class="mdl-cell mdl-cell--12-col-desktop mdl-cell--12-col-tablet mdl-cell--4-col-phone">
    <base-card>
      <base-card-title>
        <h2 class="mdl-card__title-text">Description list</h2>
      </base-card-title>
      <base-card-body>
        <dl>
          <dt>Material Design</dt>
          <dd>
            Design language developed in 2014 by Google.
            Expanding upon the "card" motifs that debuted in Google Now, Material Design makes more liberal use of grid-based layouts,
            responsive animations and transitions, padding, and depth effects such as lighting and shadows.
          </dd>
          <dt>Material Design Lite</dt>
          <dd>
            This library lets you add a Material Design look and feel to your static content websites.
            It doesn't rely on any JavaScript frameworks or libraries.
            Optimized for cross-device use, gracefully degrades in older browsers, and offers an experience that is accessible from the get-go.
          </dd>
          <dt>Material Dashboard Lite</dt>
          <dd>
            First dark dashboard on the Material Design Lite!
            Material Dashboard Lite admin template is absolutely free for commercial usage theme,
            that uses google's implementation of material design - Material Design Lite library.
          </dd>
        </dl>
      </base-card-body>
    </base-card>
  </div>
</div>
